//
// Dialog
// --------------------------------------------------


@dialog-padding-horizonal: 22px;

.body-dlg-open {
    overflow: hidden;
}

#mui-dlg-blocker {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: -10000px;
    opacity: 0;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
    will-change: opacity;
    transition: opacity .3s;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.541176);
    overflow-y: auto;
}

.mui-dlg-container {
    padding: 12px 0;
}

.mui-dlg {
    position: relative;
    width: 60%;
    min-width: 300px;
    margin: 0 auto;
    border-radius: @border-radius-base;
    background-color: #fff;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
    transition: transform .3s, opacity .3s;
    box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
}

.mui-dlg-close {
    position: absolute;
    top: 12px;
    right: @dialog-padding-horizonal - 6;
    color: #999;
    cursor: pointer;

    &:hover {
        color: #555;
    }
}

.mui-dlg-title {
    padding: 15px @dialog-padding-horizonal 0;
    font-size: @font-size-base + 4;
}

.mui-dlg-content {
    padding: 20px @dialog-padding-horizonal;
}

.mui-dlg-foot {
    padding: 0 @dialog-padding-horizonal 14px;
    text-align: right;
}

.mui-dlg-action-wrapper {
    display: inline-block;
    margin-left: 5px;
}